<!-- 状态信息弹窗 -->
<template>
  <div class="ele-body">
    <el-card shadow="never">
      <div class="form-container">
        <el-form
          :inline="true"
          class="demo-form-inline"
          ref="form"
          :model="form"
          label-width="100px"
        >
          <el-form-item label="设备编号:" prop="device_no">
            <el-input
              :maxlength="20"
              v-model="form.device_no"
              placeholder="请输入设备编号"
              disabled
            />
          </el-form-item>

          <el-form-item label="井号:" prop="name">
            <el-input
              :maxlength="20"
              v-model="form.name"
              placeholder="请输入井号"
              disabled
            />
          </el-form-item>

          <el-form-item label="安装位置:" prop="address">
            <el-input
              :maxlength="20"
              v-model="form.address"
              placeholder="请输入安装位置"
              disabled
            />
          </el-form-item>

          <el-form-item label="状态:">
            <el-select disabled v-model="form.status" placeholder="请选择状态">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <div style="margin-bottom: 10px">
            <el-divider></el-divider>
          </div>

          <el-form-item label="运行频率:" prop="run_pinlv">
            <el-input
              :maxlength="20"
              v-model="form.run_pinlv"
              placeholder="请输入运行频率"
              disabled
            >
              <span slot="suffix">Hz</span>
            </el-input>
          </el-form-item>

          <el-form-item label="产水:" prop="chanshui">
            <el-input
              :maxlength="20"
              v-model="form.chanshui"
              placeholder="请输入产水"
              disabled
            >
              <span slot="suffix">m³/h</span>
            </el-input>
          </el-form-item>

          <el-form-item label="相对高差:" prop="xiangdui_high">
            <el-input
              :maxlength="20"
              v-model="form.xiangdui_high"
              placeholder="请输入相对高差"
              disabled
            >
              <span slot="suffix">MPa</span>
            </el-input>
          </el-form-item>
        </el-form>
      </div>

      <div class="echarts-container">
        <div ref="echartsDom" style="width: 100%; height: 100%"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "StatusInfo",
  data() {
    return {
      device_id: 0,
      device_no: "J001",
      device_name: "8208-04",
      // 表单数据
      form: {},
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      options: [
        { label: "在线", value: 1 },
        { label: "离线", value: 2 },
      ],
      timer: null,
      // 默认10秒
      refreshInterval: 10000,
      // chartOptions: {
      //   // 其他配置项
      //   grid: {
      //     left: '2%',
      //     right: '3%',
      //     bottom: '10%',
      //     containLabel: true
      //   },
      //   tooltip: {
      //     trigger: 'axis',
      //     axisPointer: {
      //       type: 'cross'
      //     }
      //   },
      //   // toolbox: {
      //   //   feature: {
      //   //     saveAsImage: { show: true }
      //   //   }
      //   // },
      //   legend: {
      //     type: 'plain',
      //     bottom: 0,
      //     data: ['电流', '电压', '井底温度', '频率', '流压', '校准流压', '瞬时气量', '流量计温度', '流量计压力', '转速', '产水量', '液柱高度', '套压']
      //   },
      //   xAxis: [
      //     {
      //       type: 'category',
      //       axisTick: {
      //         alignWithLabel: true
      //       },
      //       // prettier-ignore
      //       data: []
      //     }
      //   ],
      //   yAxis: [
      //     {
      //       type: 'value',
      //       // name: '电流',
      //       position: 'left',
      //       alignTicks: true,
      //       scale: true, // 坐标刻度是否从0开始, 注意仅在type为value时有效
      //       axisLine: {
      //         show: false  // 隐藏轴线
      //       },
      //       axisTick: {
      //         show: false  // 显示刻度
      //       },
      //       axisLabel: {
      //         formatter: '{value}A'
      //       },
      //     },
      //     {
      //       type: 'value',
      //       // name: '电压',
      //       position: 'left',
      //       alignTicks: true,
      //       scale: true, // 坐标刻度是否从0开始, 注意仅在type为value时有效
      //       offset: 50,
      //       axisLine: {
      //         show: false  // 隐藏轴线
      //       },
      //       axisTick: {
      //         show: false  // 显示刻度
      //       },
      //       axisLabel: {
      //         formatter: '{value}V'
      //       },
      //     },
      //     {
      //       type: 'value',
      //       // name: '井底温度',
      //       position: 'left',
      //       alignTicks: true,
      //       scale: true, // 坐标刻度是否从0开始, 注意仅在type为value时有效
      //       offset: 90,
      //       axisLine: {
      //         show: false  // 隐藏轴线
      //       },
      //       axisTick: {
      //         show: false  // 显示刻度
      //       },
      //       axisLabel: {
      //         formatter: '{value}°C'
      //       },
      //     },
      //     {
      //       type: 'value',
      //       // name: '频率',
      //       position: 'left',
      //       alignTicks: true,
      //       scale: true, // 坐标刻度是否从0开始, 注意仅在type为value时有效
      //       offset: 120,
      //       axisLine: {
      //         show: false  // 隐藏轴线
      //       },
      //       axisTick: {
      //         show: false  // 显示刻度
      //       },
      //       axisLabel: {
      //         formatter: '{value}Hz'
      //       },
      //     },
      //     {
      //       type: 'value',
      //       // name: '流压',
      //       position: 'left',
      //       alignTicks: true,
      //       scale: true, // 坐标刻度是否从0开始, 注意仅在type为value时有效
      //       offset: 160,
      //       axisLine: {
      //         show: false  // 隐藏轴线
      //       },
      //       axisTick: {
      //         show: false  // 显示刻度
      //       },
      //       axisLabel: {
      //         formatter: '{value}MPa'
      //       },
      //     },
      //     {
      //       type: 'value',
      //       // name: '校准流压',
      //       position: 'left',
      //       alignTicks: true,
      //       scale: true, // 坐标刻度是否从0开始, 注意仅在type为value时有效
      //       offset: 210,
      //       axisLine: {
      //         show: false  // 隐藏轴线
      //       },
      //       axisTick: {
      //         show: false  // 显示刻度
      //       },
      //       axisLabel: {
      //         formatter: '{value}MPa'
      //       },
      //     },
      //     {
      //       type: 'value',
      //       // name: '瞬时气量',
      //       position: 'right',
      //       alignTicks: true,
      //       scale: true, // 坐标刻度是否从0开始, 注意仅在type为value时有效
      //       axisLine: {
      //         show: false  // 隐藏轴线
      //       },
      //       axisTick: {
      //         show: false  // 显示刻度
      //       },
      //       axisLabel: {
      //         formatter: '{value}m³/h'
      //       },
      //     },
      //     {
      //       type: 'value',
      //       // name: '流量计温度',
      //       position: 'right',
      //       alignTicks: true,
      //       scale: true, // 坐标刻度是否从0开始, 注意仅在type为value时有效
      //       offset: 50,
      //       axisLine: {
      //         show: false  // 隐藏轴线
      //       },
      //       axisTick: {
      //         show: false  // 显示刻度
      //       },
      //       axisLabel: {
      //         formatter: '{value}℃'
      //       },
      //     },
      //     {
      //       type: 'value',
      //       // name: '流量计压力',
      //       position: 'right',
      //       alignTicks: true,
      //       scale: true, // 坐标刻度是否从0开始, 注意仅在type为value时有效
      //       offset: 100,
      //       axisLine: {
      //         show: false  // 隐藏轴线
      //       },
      //       axisTick: {
      //         show: false  // 显示刻度
      //       },
      //       axisLabel: {
      //         formatter: '{value}kPa'
      //       },
      //     },
      //     {
      //       type: 'value',
      //       // name: '转速',
      //       position: 'right',
      //       alignTicks: true,
      //       scale: true, // 坐标刻度是否从0开始, 注意仅在type为value时有效
      //       offset: 140,
      //       axisLine: {
      //         show: false  // 隐藏轴线
      //       },
      //       axisTick: {
      //         show: false  // 显示刻度
      //       },
      //       axisLabel: {
      //         formatter: '{value}RPM'
      //       },
      //     },
      //     {
      //       type: 'value',
      //       // name: '产水量',
      //       position: 'right',
      //       alignTicks: true,
      //       scale: true, // 坐标刻度是否从0开始, 注意仅在type为value时有效
      //       offset: 200,
      //       axisLine: {
      //         show: false  // 隐藏轴线
      //       },
      //       axisTick: {
      //         show: false  // 显示刻度
      //       },
      //       axisLabel: {
      //         formatter: '{value}m³/h'
      //       },
      //     },
      //     {
      //       type: 'value',
      //       // name: '液柱高度',
      //       position: 'right',
      //       alignTicks: true,
      //       scale: true, // 坐标刻度是否从0开始, 注意仅在type为value时有效
      //       offset: 250,
      //       axisLine: {
      //         show: false  // 隐藏轴线
      //       },
      //       axisTick: {
      //         show: false  // 显示刻度
      //       },
      //       axisLabel: {
      //         formatter: '{value}m'
      //       },
      //     },
      //     {
      //       type: 'value',
      //       // name: '套压',
      //       position: 'left',
      //       alignTicks: true,
      //       scale: true, // 坐标刻度是否从0开始, 注意仅在type为value时有效
      //       offset: 260,
      //       axisLine: {
      //         show: false  // 隐藏轴线
      //       },
      //       axisTick: {
      //         show: false  // 显示刻度
      //       },
      //       axisLabel: {
      //         formatter: '{value}MPa'
      //       },
      //     },
      //   ],
      //   series: [
      //     {
      //       name: '电流',
      //       type: 'line',
      //       smooth: true,
      //       symbol: 'none',
      //       lineStyle: {
      //         width: 2
      //       },
      //       yAxisIndex: 1,
      //       data: []
      //     },
      //     {
      //       name: '电压',
      //       type: 'line',
      //       smooth: true,
      //       symbol: 'none',
      //       lineStyle: {
      //         width: 2
      //       },
      //       yAxisIndex: 1,
      //       data: []
      //     },
      //     {
      //       name: '井底温度',
      //       type: 'line',
      //       smooth: true,
      //       symbol: 'none',
      //       lineStyle: {
      //         width: 2
      //       },
      //       yAxisIndex: 2,
      //       data: []
      //     },
      //     {
      //       name: '频率',
      //       type: 'line',
      //       smooth: true,
      //       symbol: 'none',
      //       lineStyle: {
      //         width: 2
      //       },
      //       yAxisIndex: 3,
      //       data: []
      //     },
      //     {
      //       name: '流压',
      //       type: 'line',
      //       smooth: true,
      //       symbol: 'none',
      //       lineStyle: {
      //         width: 2
      //       },
      //       yAxisIndex: 4,
      //       data: []
      //     },
      //     {
      //       name: '校准流压',
      //       type: 'line',
      //       smooth: true,
      //       symbol: 'none',
      //       lineStyle: {
      //         width: 2
      //       },
      //       yAxisIndex: 5,
      //       data: []
      //     },
      //     {
      //       name: '瞬时气量',
      //       type: 'line',
      //       smooth: true,
      //       symbol: 'none',
      //       lineStyle: {
      //         width: 2
      //       },
      //       yAxisIndex: 6,
      //       data: []
      //     },
      //     {
      //       name: '流量计温度',
      //       type: 'line',
      //       smooth: true,
      //       symbol: 'none',
      //       lineStyle: {
      //         width: 2
      //       },
      //       yAxisIndex: 7,
      //       data: []
      //     },
      //     {
      //       name: '流量计压力',
      //       type: 'line',
      //       smooth: true,
      //       symbol: 'none',
      //       lineStyle: {
      //         width: 2
      //       },
      //       yAxisIndex: 8,
      //       data: []
      //     },
      //     {
      //       name: '转速',
      //       type: 'line',
      //       smooth: true,
      //       symbol: 'none',
      //       lineStyle: {
      //         width: 2
      //       },
      //       yAxisIndex: 9,
      //       data: []
      //     },
      //     {
      //       name: '产水量',
      //       type: 'line',
      //       smooth: true,
      //       symbol: 'none',
      //       lineStyle: {
      //         width: 2
      //       },
      //       yAxisIndex: 10,
      //       data: []
      //     },
      //     {
      //       name: '液柱高度',
      //       type: 'line',
      //       smooth: true,
      //       symbol: 'none',
      //       lineStyle: {
      //         width: 2
      //       },
      //       yAxisIndex: 11,
      //       data: []
      //     },
      //     {
      //       name: '套压',
      //       type: 'line',
      //       smooth: true,
      //       symbol: 'none',
      //       lineStyle: {
      //         width: 2
      //       },
      //       yAxisIndex: 12,
      //       data: []
      //     },
      //   ],
      //   itemStyle: {
      //     normal: {
      //       lineStyle: {
      //         width: 2 // line width
      //       }
      //     }
      //   }
      // }
      chartOptions: {
        color: [
          "#5470c6",
          "#91cc75",
          "#fac858",
          "#ee6666",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc",
        ],
        // 其他配置项
        grid: {
          left: "5%",
          right: "3%",
          bottom: "10%",
          containLabel: true,
        },
        // grid: [
        //   {left: '10%', right: '10%', top: '10%', bottom: '50%'}, // 第一个图表区域，包括第一个Y轴
        //   {left: '10%', right: '10%', top: '60%', bottom: '10%'}  // 第二个图表区域，包括第二个Y轴
        // ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {show: true}
        //   }
        // },
        legend: {
          type: "plain",
          bottom: 0,
          data: [
            "电流",
            "电压",
            "井底温度",
            "频率",
            "流压",
            "校准流压",
            "瞬时气量",
            "流量计温度",
            "流量计压力",
            "转速",
            "产水量",
            "液柱高度",
            "套压",
          ],
          selected: {
            电流: true,
            电压: false,
            井底温度: false,
            频率: false,
            流压: true,
            校准流压: false,
            瞬时气量: true,
            流量计温度: false,
            流量计压力: false,
            转速: false,
            产水量: false,
            液柱高度: false,
            套压: true,
          },
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              rotate: 30, // 设置标签旋转角度为45度
            },
            // prettier-ignore
            data: [],
            splitLine: {
              show: true,
              lineStyle: {
                type: "solid",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            // name: '电流',
            position: "left",
            alignTicks: true,
            scale: false, // 坐标刻度是否从0开始, 注意仅在type为value时有效

            axisLine: {
              show: false, // 隐藏轴线
              lineStyle: {
                color: "#FFA500",
              },
            },
            axisTick: {
              show: false, // 显示刻度
            },
            axisLabel: { formatter: "{value}A" },

            boundaryGap: ['0%', '30%'],nameTextStyle: {
              fontWeight: "bold",
              fontSize: 15,
              align: "center",

              lineHeight: 50,
            },
          },
          {
            type: "value",
            // name: '电压',
            position: "left",
            alignTicks: true,
            scale: false, // 坐标刻度是否从0开始, 注意仅在type为value时有效
            offset: 35,

            axisLine: {
              show: false, // 隐藏轴线
              lineStyle: {
                color: "#4B0082",
              },
            },
            axisTick: {
              show: false, // 显示刻度
            },
            axisLabel: { formatter: "{value}V" },
            boundaryGap: ['0%', '30%'],nameTextStyle: {
              fontWeight: "bold",
              fontSize: 15,
              align: "center",

              lineHeight: 50,
            },
          },
          {
            type: "value",
            // name: '井底温度',
            position: "left",
            alignTicks: true,
            scale: false, // 坐标刻度是否从0开始, 注意仅在type为value时有效
            offset: 70,

            axisLine: {
              show: false, // 隐藏轴线
              lineStyle: {
                color: "#4682B4",
              },
            },
            axisTick: {
              show: false, // 显示刻度
            },
            axisLabel: { formatter: "{value}°C" },

            boundaryGap: ['0%', '30%'],nameTextStyle: {
              fontWeight: "bold",
              fontSize: 15,
              align: "center",

              lineHeight: 50,
            },
          },
          {
            type: "value",
            // name: '频率',
            position: "left",
            alignTicks: true,
            scale: false, // 坐标刻度是否从0开始, 注意仅在type为value时有效
            offset: 105,

            axisLine: {
              show: false, // 隐藏轴线
              lineStyle: {
                color: "#66B511",
              },
            },
            axisTick: {
              show: false, // 显示刻度
            },
            axisLabel: { formatter: "{value}Hz" },

            boundaryGap: ['0%', '30%'],nameTextStyle: {
              fontWeight: "bold",
              fontSize: 15,
              align: "center",

              lineHeight: 50,
            },
          },
          {
            type: "value",
            // name: '流压',
            position: "left",
            alignTicks: true,
            scale: false, // 坐标刻度是否从0开始, 注意仅在type为value时有效
            offset: 35,

            axisLine: {
              show: false, // 隐藏轴线
              lineStyle: {
                color: "#0000FF",
              },
            },
            axisTick: {
              show: false, // 显示刻度
            },
            axisLabel: { formatter: "{value}MPa" },

            boundaryGap: ['0%', '30%'],nameTextStyle: {
              fontWeight: "bold",
              fontSize: 15,
              align: "center",

              lineHeight: 50,
            },
          },
          {
            type: "value",
            // name: '校准流压',
            position: "left",
            alignTicks: true,
            scale: false, // 坐标刻度是否从0开始, 注意仅在type为value时有效
            offset: 200,

            axisLine: {
              show: false, // 隐藏轴线
              lineStyle: {
                color: "#AAFF00",
              },
            },
            axisTick: {
              show: false, // 显示刻度
            },
            axisLabel: { formatter: "{value}MPa" },

            boundaryGap: ['0%', '30%'],nameTextStyle: {
              fontWeight: "bold",
              fontSize: 15,
              align: "center",

              lineHeight: 50,
            },
          },
          {
            type: "value",
            // name: '瞬时气量',
            position: "left",
            alignTicks: true,
            scale: false, // 坐标刻度是否从0开始, 注意仅在type为value时有效
            offset: 250,

            axisLine: {
              show: false, // 隐藏轴线
              lineStyle: {
                color: "#FF0000",
              },
            },
            axisTick: {
              show: false, // 显示刻度
            },
            axisLabel: { formatter: "{value}m³/h" },

            boundaryGap: ['0%', '30%'],nameTextStyle: {
              fontWeight: "bold",
              fontSize: 15,
              align: "center",

              lineHeight: 50,
            },
          },
          {
            type: "value",
            // name: '流量计温度',
            position: "left",
            alignTicks: true,
            scale: false, // 坐标刻度是否从0开始, 注意仅在type为value时有效
            offset: 300,

            axisLine: {
              show: false, // 隐藏轴线
              lineStyle: {
                color: "#FF7F50",
              },
            },
            axisTick: {
              show: false, // 显示刻度
            },
            axisLabel: { formatter: "{value}℃" },

            boundaryGap: ['0%', '30%'],nameTextStyle: {
              fontWeight: "bold",
              fontSize: 15,
              align: "center",

              lineHeight: 50,
            },
          },
          {
            type: "value",
            // name: '流量计压力',
            position: "left",
            alignTicks: true,
            scale: false, // 坐标刻度是否从0开始, 注意仅在type为value时有效
            offset: 330,

            axisLine: {
              show: false, // 隐藏轴线
              lineStyle: {
                color: "#00FFFF",
              },
            },
            axisTick: {
              show: false, // 显示刻度
            },
            axisLabel: { formatter: "{value}kPa" },

            boundaryGap: ['0%', '30%'],nameTextStyle: {
              fontWeight: "bold",
              fontSize: 15,
              align: "center",

              lineHeight: 50,
            },
          },
          {
            type: "value",
            // name: '转速',
            position: "left",
            alignTicks: true,
            scale: false, // 坐标刻度是否从0开始, 注意仅在type为value时有效
            offset: 375,

            axisLine: {
              show: false, // 隐藏轴线
              lineStyle: {
                color: "#000000",
              },
            },
            axisTick: {
              show: false, // 显示刻度
            },
            axisLabel: { formatter: "{value}RPM" },

            boundaryGap: ['0%', '30%'],nameTextStyle: {
              fontWeight: "bold",
              fontSize: 15,
              align: "center",

              lineHeight: 50,
            },
          },
          {
            type: "value",
            // name: '产水量',
            position: "left",
            alignTicks: true,
            scale: false, // 坐标刻度是否从0开始, 注意仅在type为value时有效
            offset: 430,

            axisLine: {
              show: false, // 隐藏轴线
              lineStyle: {
                color: "#008000",
              },
            },
            axisTick: {
              show: false, // 显示刻度
            },
            axisLabel: { formatter: "{value}m³/h" },

            boundaryGap: ['0%', '30%'],nameTextStyle: {
              fontWeight: "bold",
              fontSize: 15,
              align: "center",

              lineHeight: 50,
            },
          },
          {
            type: "value",
            // name: '液柱高度',
            position: "left",
            alignTicks: true,
            scale: false, // 坐标刻度是否从0开始, 注意仅在type为value时有效
            offset: 480,

            axisLine: {
              show: false, // 隐藏轴线
              lineStyle: {
                color: "#8A2BE2",
              },
            },
            axisTick: {
              show: false, // 显示刻度
            },
            axisLabel: { formatter: "{value}m" },

            boundaryGap: ['0%', '30%'],nameTextStyle: {
              fontWeight: "bold",
              fontSize: 15,
              align: "center",

              lineHeight: 50,
            },
          },
          {
            type: "value",
            // name: '套压',
            position: "left",
            alignTicks: true,
            scale: false, // 坐标刻度是否从0开始, 注意仅在type为value时有效
            offset: 150,

            axisLine: {
              show: false, // 隐藏轴线
              lineStyle: {
                color: "#FF1493",
              },
            },
            axisTick: {
              show: false, // 显示刻度
            },
            axisLabel: { formatter: "{value}MPa" },

            boundaryGap: ['0%', '30%'],nameTextStyle: {
              fontWeight: "bold",
              fontSize: 15,
              align: "center",

              lineHeight: 50,
            },
          },
        ],
        series: [
          {
            name: "电流",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 2,
            },
            itemStyle: {
              color: "#FFA500", // 设置曲线颜色
            },
            yAxisIndex: 0,
            data: [],
          },
          {
            name: "电压",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 2,
            },
            itemStyle: {
              color: "#4B0082", // 设置曲线颜色
            },
            yAxisIndex: 1,
            data: [],
          },
          {
            name: "井底温度",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 2,
            },
            itemStyle: {
              color: "#4682B4", // 设置曲线颜色
            },
            yAxisIndex: 2,
            data: [],
          },
          {
            name: "频率",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 2,
            },
            itemStyle: {
              color: "#66B511", // 设置曲线颜色
            },
            yAxisIndex: 3,
            data: [],
          },
          {
            name: "流压",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 2,
            },
            itemStyle: {
              color: "#0000FF", // 设置曲线颜色
            },
            yAxisIndex: 4,
            data: [],
          },
          {
            name: "校准流压",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 2,
            },
            itemStyle: {
              color: "#AAFF00", // 设置曲线颜色
            },
            yAxisIndex: 5,
            data: [],
          },
          {
            name: "瞬时气量",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 2,
            },
            itemStyle: {
              color: "#FF0000", // 设置曲线颜色
            },
            yAxisIndex: 6,
            data: [],
          },
          {
            name: "流量计温度",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 2,
            },
            itemStyle: {
              color: "#FF7F50", // 设置曲线颜色
            },
            yAxisIndex: 7,
            data: [],
          },
          {
            name: "流量计压力",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 2,
            },
            itemStyle: {
              color: "#00FFFF", // 设置曲线颜色
            },
            yAxisIndex: 8,
            data: [],
          },
          {
            name: "转速",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 2,
            },
            itemStyle: {
              color: "#000000", // 设置曲线颜色
            },
            yAxisIndex: 9,
            data: [],
          },
          {
            name: "产水量",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 2,
            },
            itemStyle: {
              color: "#008000", // 设置曲线颜色
            },
            yAxisIndex: 10,
            data: [],
          },
          {
            name: "液柱高度",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 2,
            },
            itemStyle: {
              color: "#8A2BE2", // 设置曲线颜色
            },
            yAxisIndex: 11,
            data: [],
          },
          {
            name: "套压",
            type: "line",
            smooth: true,
            symbol: "none",
            lineStyle: {
              width: 2,
            },
            itemStyle: {
              color: "#FF1493", // 设置曲线颜色
            },
            yAxisIndex: 12,
            data: [],
          },
        ],
        itemStyle: {
          normal: {
            lineStyle: {
              width: 2, // line width
            },
          },
        },
      },
    };
  },
  mounted() {
    this.chart = echarts.init(this.$refs.echartsDom);
    this.getLatesthourdata();
    this.timer = setInterval(() => {
      this.getLatesthourdata();
    }, this.refreshInterval);
    // 监听窗口大小变化事件
    window.addEventListener("resize", this.handleResize);
    this.chart.on("legendselectchanged", this.handleLegendSelectChanged);
  },
  created() {
    // 获取 this.$route.query 对象
    const query = this.$route.query;
    // 获取 device_id 的值
    this.device_id = query.device_id; // 1
    this.device_no = query.device_no; // J001
    this.device_name = query.name; // 8208-04

    // 设置页面标题
    document.title = "状态信息【" + this.device_name + "】";

    this.getDeviceInfo();
  },
  beforeDestroy() {
    // 在组件销毁前解绑resize事件
    window.removeEventListener("resize", this.handleResize);
    this.chart.dispose(); // 销毁 echarts 实例
    clearInterval(this.timer);
  },
  methods: {
    // 窗口大小变化时调用的方法
    handleResize() {
      // 调用ECharts图表的resize方法
      if (this.chart) {
        this.chart.resize();
      }
    },
    handleLegendSelectChanged(params) {
      console.log(params);
      this.chartOptions.legend.selected = params.selected;
      // {
      //   "name": "瞬时气量",
      //   "selected": {
      //   "电压": true,
      //     "电流": true,
      //     "井底温度": true,
      //     "频率": true,
      //     "流压": false,
      //     "校准流压": true,
      //     "瞬时气量": false,
      //     "流量计温度": true,
      //     "流量计压力": true,
      //     "转速": true,
      //     "产水量": true,
      //     "液柱高度": true,
      //     "套压": true
      // },
      //   "type": "legendselectchanged"
      // }
      const selectedSeries = params.selected;
      const yAxisIndex = [];
      this.chartOptions.series.forEach((el, index) => {
        let flag = selectedSeries[el.name];
        yAxisIndex.push({ index: index, flag: flag });
      });
      console.log(yAxisIndex);
      console.log(this.chartOptions);
      let yAxis=this.updateYFn(yAxisIndex)
      this.chart.setOption({
        yAxis: yAxis,
        grid:this.chartOptions.grid
      });
      // this.chart.resize();
    },
    getLatestdata() {
      const time = new Date().toLocaleTimeString().replace(/^\D*/, "");
      this.$http
        .post("/device/latestdata", { device_no: this.device_no })
        .then((res) => {
          if (res.data.code === 0) {
            console.log(res.data.data);
            // 电压
            const value1 = res.data.data.voltage;
            // 电流
            const value2 = res.data.data.dianliu;
            // 井底温度
            const value3 = res.data.data.temp;
            // 频率
            const value4 = res.data.data.pinlv;
            // 流压
            const value5 = res.data.data.yali;
            // 校准流压
            const value6 = res.data.data.biao_liuya;
            // 瞬时气量
            const value7 = res.data.data.bkll;
            // 流量计温度
            const value8 = res.data.data.wd;
            // 流量计压力
            const value9 = res.data.data.yl;
            // 转速
            const value10 = res.data.data.run_speed;
            // 产水
            const value11 = res.data.data.chanshui;
            // 液柱高度
            const value12 = res.data.data.yezhu_high;
            // 套压
            const value13 = res.data.data.tao_value;
            // console.log(time, value1, value2, value3, value4)
            this.chartOptions.xAxis[0].data.push(time);
            this.chartOptions.series[0].data.push(value1);
            this.chartOptions.series[1].data.push(value2);
            this.chartOptions.series[2].data.push(value3);
            this.chartOptions.series[3].data.push(value4);
            this.chartOptions.series[4].data.push(value5);
            this.chartOptions.series[5].data.push(value6);
            this.chartOptions.series[6].data.push(value7);
            this.chartOptions.series[7].data.push(value8);
            this.chartOptions.series[8].data.push(value9);
            this.chartOptions.series[9].data.push(value10);
            this.chartOptions.series[10].data.push(value11);
            this.chartOptions.series[11].data.push(value12);
            this.chartOptions.series[12].data.push(value13);
            if (this.chartOptions.xAxis[0].data.length > 60) {
              this.chartOptions.xAxis[0].data.shift();
              this.chartOptions.series[0].data.shift();
              this.chartOptions.series[1].data.shift();
              this.chartOptions.series[2].data.shift();
              this.chartOptions.series[3].data.shift();
              this.chartOptions.series[4].data.shift();
              this.chartOptions.series[5].data.shift();
              this.chartOptions.series[6].data.shift();
              this.chartOptions.series[7].data.shift();
              this.chartOptions.series[8].data.shift();
              this.chartOptions.series[9].data.shift();
              this.chartOptions.series[10].data.shift();
              this.chartOptions.series[11].data.shift();
              this.chartOptions.series[12].data.shift();
            }
            this.$forceUpdate();
            this.renderChart();
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },
    getLatesthourdata() {
      //const time = new Date().toLocaleTimeString().replace(/^\D*/, '')
      this.$http
        .post("/device/latest_hourdata", { device_no: this.device_no })
        .then((res) => {
          if (res.data.code === 0) {
            console.log(res.data.data);
            let arr = res.data.data;
            for (var i = 0; i < arr.length; i++) {
              // 时间
              const time = arr[i].create_time;
              // 电流
              const value1 = arr[i].dianliu;
              // 电压
              const value2 = arr[i].voltage;
              // 井底温度
              const value3 = arr[i].temp;
              // 频率
              const value4 = arr[i].pinlv;
              // 流压
              const value5 = arr[i].yali;
              // 校准流压
              const value6 = arr[i].biao_liuya;
              // 瞬时气量
              const value7 = arr[i].bkll;
              // 流量计温度
              const value8 = arr[i].wd;
              // 流量计压力
              const value9 = arr[i].yl;
              // 转速
              const value10 = arr[i].run_speed;
              // 产水
              const value11 = arr[i].chanshui;
              // 液柱高度
              const value12 = arr[i].yezhu_high;
              // 套压
              const value13 = arr[i].tao_value;
              // console.log(time, value1, value2, value3, value4);
              this.chartOptions.xAxis[0].data.push(time);
              this.chartOptions.series[0].data.push(value1);
              this.chartOptions.series[1].data.push(value2);
              this.chartOptions.series[2].data.push(value3);
              this.chartOptions.series[3].data.push(value4);
              this.chartOptions.series[4].data.push(value5);
              this.chartOptions.series[5].data.push(value6);
              this.chartOptions.series[6].data.push(value7);
              this.chartOptions.series[7].data.push(value8);
              this.chartOptions.series[8].data.push(value9);
              this.chartOptions.series[9].data.push(value10);
              this.chartOptions.series[10].data.push(value11);
              this.chartOptions.series[11].data.push(value12);
              this.chartOptions.series[12].data.push(value13);
              if (this.chartOptions.xAxis[0].data.length > 60) {
                this.chartOptions.xAxis[0].data.shift();
                this.chartOptions.series[0].data.shift();
                this.chartOptions.series[1].data.shift();
                this.chartOptions.series[2].data.shift();
                this.chartOptions.series[3].data.shift();
                this.chartOptions.series[4].data.shift();
                this.chartOptions.series[5].data.shift();
                this.chartOptions.series[6].data.shift();
                this.chartOptions.series[7].data.shift();
                this.chartOptions.series[8].data.shift();
                this.chartOptions.series[9].data.shift();
                this.chartOptions.series[10].data.shift();
                this.chartOptions.series[11].data.shift();
                this.chartOptions.series[12].data.shift();
              }
            }
            this.$forceUpdate();
            this.renderChart();
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },
    getDeviceInfo() {
      this.$http
        .post("/device/info", { id: this.device_id })
        .then((res) => {
          if (res.data.code === 0) {
            this.form = res.data.data;
            console.log(this.form);
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },
    updateChartData() {
      const time = new Date().toLocaleTimeString().replace(/^\D*/, "");
      const value1 = Math.floor(Math.random() * 100);
      const value2 = Math.floor(Math.random() * 1000);
      const value3 = Math.floor(Math.random() * 1000);
      const value4 = Math.floor(Math.random() * 100);
      const value5 = Math.floor(Math.random() * 100);
      const value6 = Math.floor(Math.random() * 100);
      const value7 = Math.floor(Math.random() * 100);
      const value8 = Math.floor(Math.random() * 10);
      const value9 = Math.floor(Math.random() * 100);
      const value10 = Math.floor(Math.random() * 100);
      const value11 = Math.floor(Math.random() * 10);
      const value12 = Math.floor(Math.random() * 100);
      // console.log(time, value1, value2, value3, value4)
      // eslint-disable-next-line vue/no-mutating-props
      this.chartOptions.xAxis[0].data.push(time);
      // eslint-disable-next-line vue/no-mutating-props
      this.chartOptions.series[0].data.push(value1);
      // eslint-disable-next-line vue/no-mutating-props
      this.chartOptions.series[1].data.push(value2);
      // eslint-disable-next-line vue/no-mutating-props
      this.chartOptions.series[2].data.push(value3);
      // eslint-disable-next-line vue/no-mutating-props
      this.chartOptions.series[3].data.push(value4);
      // eslint-disable-next-line vue/no-mutating-props
      this.chartOptions.series[4].data.push(value5);
      // eslint-disable-next-line vue/no-mutating-props
      this.chartOptions.series[5].data.push(value6);
      // eslint-disable-next-line vue/no-mutating-props
      this.chartOptions.series[6].data.push(value7);
      // eslint-disable-next-line vue/no-mutating-props
      this.chartOptions.series[7].data.push(value8);
      // eslint-disable-next-line vue/no-mutating-props
      this.chartOptions.series[8].data.push(value9);
      // eslint-disable-next-line vue/no-mutating-props
      this.chartOptions.series[9].data.push(value10);
      // eslint-disable-next-line vue/no-mutating-props
      this.chartOptions.series[10].data.push(value11);
      // eslint-disable-next-line vue/no-mutating-props
      this.chartOptions.series[11].data.push(value12);
      if (this.chartOptions.xAxis[0].data.length > 60) {
        // eslint-disable-next-line vue/no-mutating-props
        this.chartOptions.xAxis[0].data.shift();
        // eslint-disable-next-line vue/no-mutating-props
        this.chartOptions.series[0].data.shift();
        // eslint-disable-next-line vue/no-mutating-props
        this.chartOptions.series[1].data.shift();
        // eslint-disable-next-line vue/no-mutating-props
        this.chartOptions.series[2].data.shift();
        // eslint-disable-next-line vue/no-mutating-props
        this.chartOptions.series[3].data.shift();
        // eslint-disable-next-line vue/no-mutating-props
        this.chartOptions.series[4].data.shift();
        // eslint-disable-next-line vue/no-mutating-props
        this.chartOptions.series[5].data.shift();
        // eslint-disable-next-line vue/no-mutating-props
        this.chartOptions.series[6].data.shift();
        // eslint-disable-next-line vue/no-mutating-props
        this.chartOptions.series[7].data.shift();
        // eslint-disable-next-line vue/no-mutating-props
        this.chartOptions.series[8].data.shift();
        // eslint-disable-next-line vue/no-mutating-props
        this.chartOptions.series[9].data.shift();
        // eslint-disable-next-line vue/no-mutating-props
        this.chartOptions.series[10].data.shift();
        // eslint-disable-next-line vue/no-mutating-props
        this.chartOptions.series[11].data.shift();
      }
      this.renderChart();
    },
    renderChart() {
      let arr = [];
      this.chartOptions.series.forEach((el, index) => {
        let flag = this.chartOptions.legend.selected[el.name];
        arr.push({ index: index, flag: flag });
      });
      this.chartOptions.yAxis = this.updateYFn(arr);
      console.log(this.chartOptions);
      this.chart.setOption(this.chartOptions);
      // this.chart.setBackgroundColor(this.backgroundColor)
    },
    updateYFn(yAxisIndex) {
      const yAxis = [];
      let idx = -1;
      yAxisIndex.forEach((el) => {
        const yAxisOption = this.chartOptions.yAxis[el.index];
        if (el.flag) {
          idx++;
          yAxisOption.offset = idx * 66;
        } else {
          yAxisOption.offset = 0;
        }
        yAxis.push(yAxisOption);
      });
      if(idx>4){
          this.chartOptions.grid.left='18%'
        }else{
          this.chartOptions.grid.left='8%'
        }
      return yAxis;
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit("update:visible", value);
    },
  },
};
</script>

<style scoped>
.echarts-container {
  width: 100%;
  height: 66vh;
  /*overflow: auto;*/
}

.form-container {
  width: 100%;
  height: 15vh;
}
</style>
